<template>
  <Dialog
    v-model="show"
    @confirm="handleSubmit"
    @close="close"
    :title="t('order_lists_detail.商品发货')"
    width="600px"
    :confirmLoading="confirmLoading"
  >
    <div>
      <el-form ref="formRef" :model="form" label-width="120px" :rules="rules">
        <el-form-item :label="t('order_lists_detail.快递单号')" prop="sendNo">
          <el-input v-model="form.sendNo" :placeholder="t('order_lists_detail.请输入快递单号')" />
        </el-form-item>
        <el-form-item :label="t('order_lists_detail.快递公司code')" prop="sendCode">
          <el-input v-model="form.sendCode" :placeholder="t('order_lists_detail.请输入快递公司code')" />
        </el-form-item>
        <el-form-item :label="t('order_lists_detail.快递公司名称')" prop="sendName">
          <el-input v-model="form.sendName" :placeholder="t('order_lists_detail.请输入快递公司名称')" />
        </el-form-item>
      </el-form>
    </div>
  </Dialog>
</template>
<script setup>
import { ref, watch, onMounted } from "vue";
import Dialog from "@/components/dialog.vue";
import Api from "@/config/api/api";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";

const { t } = useI18n();
const show = defineModel();
const emit = defineEmits(["success"]);
const props = defineProps({
  detail: {
    type: Object,
    default: () => ({}),
  },
});
const formRef = ref();
const expressCompanyOptions = [
  { label: "申通快递", id: 1 },
  { label: "京东快递", id: 1 },
  { label: "顺丰快递", id: 1 },
];
const form = ref({
  sendNo: "",
  sendCode: "",
  sendName: "",
});
const rules = ref({
  sendNo: [{ required: true, message: t('order_lists_detail.请输入快递单号'), trigger: "blur" }],
  sendCode: [{ required: true, message: t('order_lists_detail.请选择快递公司'), trigger: "change" }],
  sendName: [{ required: true, message: t('order_lists_detail.请输入快递公司名称'), trigger: "blur" }],
});
const confirmLoading = ref(false);
watch(show, (val) => {
  if (val) {
  }
});
const handleSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      confirmLoading.value = true;
      Api.sendGoods({
        ...form.value,
        id: props.detail.id,
      }).then((res) => {
        if (res.status === 200) {
          ElMessage.success(t('order_lists_detail.发货成功'));
          close();
          emit("success");
        }
      }).finally(() => {
        confirmLoading.value = false;
      });
    }
  });
};
const close = () => {
  form.value = {
    sendNo: "",
    sendCode: "",
    sendName: "",
  };
  show.value = false;
  formRef.value.resetFields();
};
</script>
<style lang="scss" scoped>
.h-500 {
  height: 500px;
}
.lht-38 {
  line-height: 38px;
}
.w-120 {
  width: 120px;
}
.address {
  .address-item {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
    .address-item-address {
      font-size: 12px;
      color: #999;
    }

    &:hover {
      border-color: #1890ff;
    }
    &.active {
      border-color: #1890ff;
    }
  }
}
</style>
